<template>
  <div id="searchTxt">
    <div v-if="hty" class="search-m">
      <div class="hty">
        <h2>历史搜索</h2>
        <svg @click="del()">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bin">
            <svg viewBox="0 0 512 512" id="bin" width="100%" height="100%">
              <path d="M64 160v320c0 17.6 14.4 32 32 32h288c17.6 0 32-14.4 32-32V160H64zm96 288h-32V224h32v224zm64 0h-32V224h32v224zm64 0h-32V224h32v224zm64 0h-32V224h32v224zM424 64H320V24c0-13.2-10.8-24-24-24H184c-13.2 0-24 10.8-24 24v40H56c-13.2 0-24 10.8-24 24v40h416V88c0-13.2-10.8-24-24-24zm-136 0h-96V32.401h96V64z"></path>
            </svg>
          </use>
        </svg>
      </div>
      <ul>
        <li v-for="(item,index) in searchTxt" :key="index" @click="setWord(item)">
           <!-- <router-link :to="'/search/searchList?keyWord='+item">  -->
            {{item}}
           <!-- </router-link>  -->
        </li>
      </ul>
    </div>
    <div class="search-m">
      <h2>热门搜索</h2>
      <ul>
        <li :key="index" v-for="(item,index) in searchList" @click="setWord(item.word)">
          <!-- <router-link :to="'/search/searchList?keyWord='+item.word"> -->
            {{item.word}}
          <!-- </router-link> -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'searchList',
  data () {
    return {
      hty: true
    }
  },
  computed: {
    ...mapState(['searchList']),
    searchTxt () {
      var have = localStorage.getItem('searchWord')
      return JSON.parse(have)
    }
  },
  methods: {
    del () {
      this.hty = false
      localStorage.removeItem('searchWord')
    },
    ...mapMutations({
      search: 'SEARCH',
      srhTxt: 'SEARCHTXT'
    }),
    setWord (txt) {
      var have = localStorage.getItem('searchWord')
      var haveJson = JSON.parse(have)
      if (!have) {
        var arr = []
        arr.push(txt)
        localStorage.setItem('searchWord', JSON.stringify(arr))
      }
      if (have) {
        if (haveJson.indexOf(txt) === -1) {
          var haveto = JSON.parse(have)
          haveto.unshift(txt)
          localStorage.setItem('searchWord', JSON.stringify(haveto))
        } else {
          var arr1 = haveJson.filter(function (value) {
            return value !== txt
          })
          arr1.unshift(txt)
          localStorage.removeItem('searchWord')
          localStorage.setItem('searchWord', JSON.stringify(arr1))
        }
      }
      this.srhTxt(txt)
      location.href = 'http://localhost:8080/#/search/searchList?keyWord=' + txt
    }
  },
  mounted: function () {
    this.search()
  }
}
</script>

<style scoped lang='scss'>
@import '../../static/hotcss/px2rem.scss';
#searchTxt{
  padding: px2rem(22);
  margin-top: px2rem(80);
  .search-m{
    h2{
        font-size: px2rem(32);
        color: #666;
        line-height: px2rem(80);
      }
    .hty{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: px2rem(100);
      h2{
        font-size: px2rem(32);
        color: #666;
      }
      svg{
        width: px2rem(24);
        height: px2rem(24);
        color: #cecece;
      }
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        margin:  px2rem(10) px2rem(20);
        // a{
          padding: px2rem(10);
          background:#f7f7f7;
          color: #cecece;
          font-size: px2rem(27);
          border-radius: px2rem(10);
          text-decoration: none;
        // }
        
      }
    }

  }
}
</style>
